@extends "main_not_nav.html"

@block body

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>角色权限</legend>
</fieldset>

<div id="tree_demo" class="demo-tree-more"></div>
<br><br>
<div class="layui-btn-container" style="text-align: center">
    <!--<button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>-->
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重置</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">保存</button>
</div>
<br><br>

@endblock

@block js
<script>
    layui.use(['tree', 'util'], function(){
        let tree  = layui.tree;
        let layer = layui.layer;
        let util  = layui.util;
        // 角色权限数据
        let role_permission_menus = [];
        let admin_role_id = "{{ admin_role_id }}";

        $.ajax({
            url: "{{ uri }}/show?admin_role_id=" + admin_role_id,
            method: "get",
            // data: {},
            dataType: "JSON",
            async:false,// 非异步，这样子外部 data 变量就可以获取回调值了。
            success: function (callback){
                // console.log(callback);
                // layer.msg(callback.message);
                role_permission_menus = callback.data;
            },
            error: function (callback){
                layer.msg(callback.message);
            }
        });
        console.log(role_permission_menus);

        // tree 数据结构 demo
        // let data = [{
        //     id: 1,
        //     title: '一级1',
        //     field: 'name1',
        //     checked: false,// 选中
        //     spread: false,// 展开
        //     children: [{
        //         id: 2,
        //         title: '二级1-1',
        //         field: 'name2',
        //         checked: false,
        //     }]
        // }];

        tree.render({
            elem: '#tree_demo',
            data: role_permission_menus,
            showCheckbox: true,  //是否显示复选框
            id: 'demoId',
            isJump: false, //是否允许点击节点时弹出新窗口跳转
            click: function(obj){
                // let data = obj.data;  //获取当前点击的节点数据
                // console.log(data);
                // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                let checkedData = tree.getChecked('demoId'); //获取选中节点的数据

                // layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
                let permission_ids = []
                for (index in checkedData){
                    //console.log(checkedData[index])
                    permission_ids.push(checkedData[index].id)
                    let children = checkedData[index].children
                    for (index2 in children){
                        permission_ids.push(children[index2].id)
                    }
                }
                console.log(permission_ids)

                if (1 > checkedData.length) return;
                let token = '{{ csrf_token }}'
                $.ajax({
                    url: "{{ uri }}/store",
                    method: "post",
                    data: {
                        permission_ids:permission_ids,
                        admin_role_id:admin_role_id,
                        __token: token
                    },
                    dataType: "JSON",
                    success: function (callback){
                        // console.log(callback);
                        layer.msg(callback.message);

                        setTimeout(function(){
                            location.reload();
                        }, 1000)
                    },
                    error: function (callback){
                        // console.log(callback);
                        layer.msg(callback.message);
                    }
                });
            },
            // setChecked: function(){
            //     tree.setChecked('demoId', [12, 16]); //勾选指定节点
            // },
            reload: function(){
                //重载实例
                tree.reload('demoId', {});
            }
        });

    });
</script>
@endblock